import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Icon, Button, Dropdown, Menu, InputNumber, 
  DatePicker, Modal, message, Badge, Divider,Table,Popconfirm, Pagination,} from 'antd';
import StandardTable from 'components/StandardTable';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './Dept.less';
import DeptEditModal from './DeptEditModal';
import DeptAddModal from './DeptAddModal';


const FormItem = Form.Item;





// rowSelection object indicates the need for row selection



@connect(({ dept, loading }) => ({
  dept,
  loading: loading.models.dept,
}))
@Form.create()
export default class Dept extends PureComponent {
  state = {
    selectedRows: [], // Check here to configure the default column
  };
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'dept/fetch',

    });
  };
  onSelectChange = (selectedRowKeys,selectedRows) => {
    
    this.setState({ selectedRows });
  };
  handleAdd=(fields)=>{
    this.props.dispatch({
      type: 'dept/add',
      payload: {
        ...fields
      },
    });
  };
  deleteHandler=(id)=>{
    this.props.dispatch({
      type: 'dept/remove',
      payload: {
        id:id
      },
    });
};
handleEdit=(record)=>{
  this.props.dispatch({
    type: 'dept/update',
    payload: {
      ...record
    },
  });

};
handleTableChange = (pagination) => {
    const { dispatch } = this.props;
    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
    };

    dispatch({
      type: 'dept/fetch',
      payload: params,
    });
  };
  handleSearch = (e) => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      const pagination={current:1,
        pageSize:3};

      const values = {
        ...fieldsValue,
        ...pagination,
        updatedAt: fieldsValue.updatedAt && fieldsValue.updatedAt.valueOf(),
      };


      dispatch({
        type: 'dept/fetch',
        payload: values,
      });
    });
  };
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'dept/fetch',
      payload: {
        current:1,
        pageSize:3
      },
    });
  };
  renderForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ md: 8, lg: 16, xl: 24 }}>
          <Col md={9} sm={24}>
            <FormItem label="用户名">
              {getFieldDecorator('name')(
                <Input placeholder="请输入" />
              )}
            </FormItem>
          </Col>
          <Col md={9} sm={24}>
            <FormItem label="地址">
              {getFieldDecorator('address')(
                <Input placeholder="请输入" />
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <span className={styles.submitButtons}>
              <Button type="primary" htmlType="submit">查询</Button>
              <Button style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
     );
  }
  
  render(){
          const columns = [{
        title: '部门名称',
        dataIndex: 'name',
        key:'name',
        align:'center',
      }, {
        title: '展示顺序',
        dataIndex: 'seq',
        key: 'seq',
        align:'center',
      }, {
        title: '备注',
        dataIndex: 'remark',
        key:'remark',
        align:'center',
      },
      {
        title: '操作',
        dataIndex: 'opertation',
        align:'center',
        render: (text , record ,index)  =>(<div>
          <DeptEditModal title="修改部门" record={record} onOk={this.handleEdit}>
          <a >修改</a>
           </DeptEditModal>
          <Divider type="vertical" />
        <Popconfirm title="确认要删除吗?" onConfirm={this.deleteHandler.bind(null, record.id)}>
                  <a href="">删除</a>
        </Popconfirm>
        </div>),
      }];

    const { dept: { data }, loading } = this.props;
    //const list=data.data;
    //const paginationProps = {
     // showSizeChanger: true,
     // showQuickJumper: true,
     // ...pagination,
   // };
   const {  selectedRows } = this.state;
  const record=selectedRows.length>0?selectedRows[0]:{};
  
   const rowSelection = {
    type:'radio',
    //selectedRows,
    onChange: this.onSelectChange,
    
  };
    return (
      <PageHeaderLayout >
      
      <div className={styles.dept}>
      <div className={styles.deptOperator}>
      <DeptAddModal title="新增部门" record={record} onOk={this.handleAdd}>
             <Button con="plus" type="primary">新建</Button>
          </DeptAddModal>
      </div>        
      <Table rowSelection={rowSelection} columns={columns} dataSource={data} loading={loading} pagination={{hideOnSinglePage:true}}/>
      </div>
     
      
      
      </PageHeaderLayout>);
  }
}

